/**
 * 动态弹窗表单页面展示
 * @author SPY
 * @date 2020/01/18
 */

import React from 'react';
import { Card, Row, Col, Button, DatePicker } from 'antd';
import DynamicForm from './components/DynamicModalForm';
import CopyToClipboard from '@/pages/Text/components/CopyToClipboard/CopyToClipboard';
import moment from 'moment';

const { RangePicker } = DatePicker;

class DynamicModalPage extends React.Component {

    state = {
        visible: false,
        confirmLoading: false,
    }

    // 提交
    onSubmit = (data) => {
        this.setState({ confirmLoading: true });
        setTimeout(() => {
            window.alert(JSON.stringify(data));
            this.setState({ visible: false, confirmLoading: false });
        }, 1000);
    }

    // 显示表单
    showModal = () => {
        this.setState({ visible: true, confirmLoading: false });
    }

    // 隐藏表单
    hideModal = () => {
        this.setState({ visible: false });
    }

    render() {
        const { visible, confirmLoading } = this.state;
        return (
            <Card>
                <Row gutter={24}>
                    <Col span={24}>
                        <Card
                            type='inner'
                            title='动态弹窗表单组件'
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <Button type='primary' onClick={this.showModal}>显示表单弹窗</Button>
                            <DynamicForm
                                fields={[
                                    {
                                        field: 'name',
                                        label: '员工姓名',
                                        type: 'Input',
                                        required: true,
                                        antProps: {
                                            placeholder: '请填写员工姓名',
                                        },
                                        span: 24,
                                    },
                                    {
                                        field: 'school',
                                        label: '毕业院校',
                                        type: 'Select',
                                        required: true,
                                        options: [{ value: '清华大学', label: '清华大学' }, { value: '北京大学', label: '北京大学' }, { value: "郑州大学", label: '郑州大学' }],
                                        antProps: {
                                            allowClear: true,
                                        },
                                        span: 12,
                                    },
                                    {
                                        field: 'homeName',
                                        label: '所属地区',
                                        required: true,
                                        options: [
                                            { value: '河南', label: '河南', children: [{ value: "郑州", label: "郑州" }, { value: '开封', label: '开封' }, { value: '周口', label: '周口' }] },
                                            { value: '上海', label: '上海' },
                                        ],
                                        type: 'Cascader',
                                        span: 12,
                                    },
                                    {
                                        field: 'likes',
                                        label: '兴趣爱好',
                                        initialValue: ['打豆豆'],
                                        type: 'Checkbox',
                                        options: [{ value: '爬山', label: '爬山' }, { value: '游泳', label: '游泳' }, { value: '读书', label: '读书' }, { value: '打豆豆', label: '打豆豆' }],
                                        antProps: {
                                            onChange: (values) => { console.log(values) }
                                        },
                                        span: 24,
                                    },
                                    {
                                        field: 'advantage',
                                        label: '自身优势',
                                        initialValue: '自学能力强',
                                        type: 'Radio',
                                        options: [{ value: '自学能力强', label: '自学能力强' }, { value: '沟通能力强', label: '沟通能力强' }, { value: '工作负责任', label: '工作负责任' }],
                                        antProps: {
                                            onChange: (e) => { console.log(e.target.value) }
                                        },
                                        span: 24,
                                    },
                                    {
                                        field: 'time',
                                        label: '实习时间',
                                        initialValue: [moment().format('YYYY-MM-DD'), moment().add(3, 'M').format('YYYY-MM-DD')],
                                        type: 'RangePicker',
                                        span: 12,
                                    },
                                    {
                                        field: 'motto',
                                        label: '座右铭',
                                        type: 'Custom',
                                        component: <CopyToClipboard text='不逼自己一把,永远不知道自己有多强！' />,
                                        span: 24,
                                    },
                                ]}
                                onSubmit={this.onSubmit}
                                width={800}
                                layout='vertical'
                                visible={visible}
                                onCancel={this.hideModal}
                                confirmLoading={confirmLoading}
                            />
                        </Card>
                    </Col>

                </Row>
            </Card>
        );
    }
}

export default DynamicModalPage;